<template>
    <div class="login_wrap">
        <el-row>
            <el-col :span="16" :lg="16" :md="12" class="login_left">
                <div class="left_content">
                    <h2>欢迎光临</h2>
                    <div>我的世界 </div>
                </div>
            </el-col>

            <el-col :span="8" :lg="8" :md="12" class="login_right">
                <div class="right_content">
                    <div>欢迎回来!!!</div>
                    <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
                        <!-- 高度，宽度，浅灰色 -->
                        <span class="h-[1px] w-16 bg-gray-200"></span>
                        <span>账号密码登录</span>
                        <span class="h-[1px] w-16 bg-gray-200"></span>
                    </div>
                    <el-form label-width="80px" ref="formRef" :rules="rules" :model="Form">
                        <el-form-item label="账号:" prop="userName" >
                            <el-input type="text" v-model="Form.userName" placeholder="请输入用户名">
                                <!-- 插槽引入user图标 -->
                                <template #prefix>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码:" prop="passWord">
                            <el-input  type="password" v-model="Form.passWord" placeholder="请输入密码">
                                <!-- 插槽引入lock图标 -->
                                <template #prefix>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// 引入图标
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
const Form = reactive({
    userName: '',
    passWord: ''
})
// 表单验证rules,要在前面指定prop
const rules = {
  userName:[
    // 书写验证规则
    {
      required: true,
      message: '用户名不能为空',
      // 失去焦点的时候触发
      trigger: 'blur'
    },
    {
      min:4,
      max:8,
      message: '用户名长度必须是4-8个字符',
      trigger: 'blur'
    },
  ],
  passWord:[
    {
      required: true,
      message: '密码不能为空',
      // 失去焦点的时候触发
      trigger: 'blur'
    },
  ]
}
const formRef = ref(null)

const onSubmit = () => {
    formRef.value.validate((valid)=>{
    // 会输出true或者false
    console.log(valid)
    if(!valid){
      return false
    }
    console.log('验证通过')
  })
}
</script>

<style lang="less" scoped>
.login_left {
    height: 100vh;
    background-image: url(../assets/Default.jpg);
    display: flex;
    justify-content: center;
    align-items: center;

    .left_content {
        h2 {
            font-size: 80px;
            font-weight: bold;
            color: rgb(127, 255, 189);
            text-shadow: 0 0 4px rgb(255, 255, 255),
                0 -5px 4px #ff3,
                2px -10px 6px #fd3,
                -2px -15px 11px #f80,
                2px -25px 18px #f20;
        }

        div {
            font-size: 80px;
            // font-weight: bold;
            text-shadow: 1px 1px 0px #000,
                -1px -1px 0px #fff;
        }
    }
}

.login_right {
    height: 100vh;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.right_content:nth-child(1) {
    text-shadow: -1px -1px 0px #000,
        1px 1px 0px #fff;
}

.login_left:nth-child(1) {}
</style>